<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport" />
<meta content="telephone=no" name="format-detection" />
<link rel="stylesheet" href="../css/supersized.css">
<link href="../jsp/css/login.css" rel="stylesheet">
<!-- 插件样式 -->
<link rel="stylesheet" type="text/css" href="./css/sm.css">
<link rel="stylesheet" type="text/css" href="./css/sm-extend.css">
<script type="text/javascript" src="../js/jquery-2.1.1.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript" src="../js/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<!-- 插件js -->
<script src="./js/zepto.js"></script>
<script src="./js/sm.js" ></script>
<script src="./js/sm-extend.js" ></script>
<title>注册</title>
</head>

<body style="background: #fff;">

<div class="container"  style="background: #fff;">
	<div class="main_content" style="text-align : -webkit-center">
			<span class="zhuce_text">注册</span>
			<ul id="send">
				<li><input id="phone" name="phone" placeholder="请输入手机号码" class="input" />
				<li>
					<input id="captcha" name="captcha" placeholder="请输入验证码" class="input" style="width:60%; float: left;" />
					<button id="getCaptchaBtn" style="width: 35%;height: 43px;border-radius:8px; list-style: none;border:none;background: #0894ec;color:#fff;font-size: 12px;float: right;">获取动态码</button></li>
				</li>
				<li ><button id="checkCaptchaBtn" style="margin-top: 30px;width: 100%;height: 40px;background: #0894ec;box-shadow: none;border:none;border-radius:8px;color: #fff;">下一步</button></li>
			</ul>
			
			<ul id="setpassword" style="display: none">
				<li><input type="password" id="password" name="password" placeholder="请输入密码" class="input" /></li>
				<li><input type="password" id="password2" name="password2" placeholder="请再次输入密码" class="input" /></li>
				<li style="    float: left;"> 
					<input type="radio" name="flag" value="0" checked="checked"/> 租客	&nbsp; 
					<input type="radio" name="flag" value="1" /> 业主 
					<input type="radio" name="flag" value="3" /> 游客 </li>
				<li><button id="registBtn" style="margin-top: 30px;width: 200px;height: 40px;background: #0894ec;box-shadow: none;border:none;border-radius:8px;">注册</button></li>
			</ul>
	</div>
</div>
<div class="bottom_css" style="width: 100%;">
	<span>已有账号? &nbsp;&nbsp;&nbsp;<a href="./login.html">&lt;返回登录 </a></span>
</div>
<script src="../js/loginjs/scripts.js"></script>
<script type="text/javascript">
window.$$=window.Zepto = Zepto;
(function ($) {
	  $.getUrlParam = function (name) {
	   var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
	   var r = window.location.search.substr(1).match(reg);
	   if (r != null) return unescape(r[2]); return null;
	  }
	 })(jQuery);
var preUrl=$.getUrlParam ("url");
/** 点击获取验证码按钮  */
$("#getCaptchaBtn").on("click",function(){
	var phone =  $("#phone").val().trim();
	if( !checkPhone(phone) ){
		$$.toast("请输入正确的手机号码");
		return;
	}
	
	//验证号码是否已被注册
	$.ajax({
		type : "POST",
		dataType : 'json',
		url :"../user/checkPhone.do",
		data : {
			"phone": phone
		},
		success : function(data) {
			console.log(data)
			if( data.resultCode=="0" ){
				// 禁用按钮并倒计时30s
				$("#getCaptchaBtn").attr("disabled",true);
				countdown(60);	
				//发送验证码
				$.ajax({
					type : "POST",
					dataType : 'json',
					url :"../sms/sendCaptcha.do",
					data : {
						"phone": phone,
						"type":1
					},
					success : function(data) {
// 						console.log(data)
						if( data.resultCode=="0" ){
							$$.toast( "验证码发送成功" );
						}else{
							$$.toast( data.msg||"获取验证码失败" );
						}
					}
				});
				
			}else{
				$$.toast("该号码已被注册");
			}
		}
	});
	
});

// 获取验证码后  倒计时30s, 禁止重复点击获取按钮
function countdown(count) {
    var a = setInterval(function() {
        count = count-1;
        $("#getCaptchaBtn").text("获取验证码（"+ count +"）");
        clearInterval(a);
        if(count>0){
            countdown(count);
        }else{
        	$("#getCaptchaBtn").attr("disabled",false).text("获取验证码");
        }
    }, 1000);
}



/** 点击获下一步时判断验证码正确性  */
$("#checkCaptchaBtn").on("click",function(){
	var phone = $("#phone").val().trim();
		captcha = $("#captcha").val().trim();
	if( !phone ){
		$$.toast("请输入手机号码");
		return ;
	}
	if( !captcha ){
		$$.toast("请输入验证码");
		return;
	}

	$.ajax({
		type : "POST",
		dataType : 'json',
		url : "../sms/isPhoneCaptcha.do",
		data : {
			"phone": phone,
			"captcha": captcha
		},
		success : function(data) {
			console.log(data)
			if( data.resultCode=="0"){
				$("#setpassword").show();
				$("#send").hide();
			}else{
				$$.toast("验证码错误");
			}
		}
	});
});


$("#registBtn").on("click",function(){
	var phone = $("#phone").val().trim(),
		captcha = $("#captcha").val().trim(),
		password = $("#password").val(),
		password2 = $("#password2").val();
	if( password != password2 ){
		$$.toast("两次输入的密码不一致");
		return ;
	}
	var flag = $("input[type=radio][name=flag]:checked").val();
	$.ajax({
		type : "POST",
		dataType : 'json',
		url :  "../user/regist.do",
		data : {
			"phone": phone,
			"password": password,
			"captcha": captcha,
			"nickName": phone,
			"flag":flag
		},
		success : function(data) {
			if( data.resultCode=="0"){
				$$.alert("注册成功",function(){
					if(preUrl!=null){
						$$.showPreloader("登陆成功，正在跳转");
						 setTimeout(function () {
							    $$.hidePreloader();
							    }, 2000);
						window.location = preUrl ;
						return ;
					}else{
						 	$$.showPreloader("登陆成功，正在跳转");
						    setTimeout(function () {
						    $$.hidePreloader();
						    }, 2000);
						window.location ="./home.html";
					}
					
				});
			}else{
				$$.toast("验证码错误");
			}
		}
	});
});

</script>
</body>
</html>
